@mixin scrollBar($size, $trackColor, $thumbBackgrondColor, $thumbHoverBackgroundColor, $radius) {
  ::-webkit-scrollbar, &::-webkit-scrollbar {
    width: $size;
    height: $size;
    background-color: $trackColor;
    border-radius: $radius;
  }
  
  ::-webkit-scrollbar-track, &::-webkit-scrollbar-track {
    background-color: $trackColor;
    border-radius: $radius;
  }
  
  ::-webkit-scrollbar-thumb, &::-webkit-scrollbar-thumb {
    background-color: $thumbBackgrondColor;
    border-radius: $radius;
    cursor: pointer;
  }
  
  ::-webkit-scrollbar-thumb:hover,
  &::-webkit-scrollbar-thumb:hover {
    background-color: $thumbHoverBackgroundColor;
  }

  ::-webkit-scrollbar-corner,
  &::-webkit-scrollbar-corner {
    background-color: transparent;
  }
}



@mixin elTable (
  $backgroundColor,
  $borderColor,
  $rowHoverBackgroundColor,
  $rowHoverFontColor,
  $tableFontColor,
  $fixedBoxShadow,
  $cellPadding,
  $rowBackgroundColor,
  $headerBackgroundColor,
  $headerFontColor,
  $rowStripedBackgrounColor,
  $rowStripedFontColor,
  $footerBackgroundColor,
  $footerFontColor
) {
  &.el-table {
    
    box-sizing: border-box;
    background-color: $backgroundColor;
    color: $tableFontColor;
    &::before {
      display: none;
    }
    .el-table__fixed .el-table__fixed-body-wrapper {
      pointer-events: none;      
      td {
        pointer-events: auto;
      }
    }
    .el-table__fixed {
      box-shadow:  $fixedBoxShadow;
    }
    &.el-table--border .el-table__body tr.el-table__row {
      td {
        border: $borderColor solid 1px;      
        border-left: none;
        border-top: none;
      }
      td {
        &:nth-of-type(1) {
          border-left: none;
        }
      }
    }
    &.el-table--border {
      border: transparent solid 1px;
      .el-table__header-wrapper {
        border-bottom: $borderColor solid 1px;
      }  
      .el-table__fixed-header-wrapper .el-table__header{
        border-bottom: $borderColor solid 1px;
      }
    }

    &.el-table--border,
    &.el-table--group,
    &.el-table--border .el-table__cell,
    &.el-table__body-wrapper .el-table--border.is-scrolling-left~.el-table__fixed {
      border-color: $borderColor;
    }

    .el-table__fixed-right::before, .el-table__fixed::before {
      background-color: transparent;
    }

    &.el-table--border::after,
    &.el-table--group::after {
      background-color: transparent;
    }


    &.el-table--border .el-table__inner-wrapper:after,
    &.el-table--border:after,
    &.el-table--border:before,
    .el-table__inner-wrapper:before {
      background-color: $borderColor;
    }

    .el-table__border-bottom-patch, 
    .el-table__border-left-patch {
      background-color: $borderColor;
    }

    .el-table__body tr.hover-row.current-row>td.el-table__cell, .el-table__body tr.hover-row.el-table__row--striped.current-row>td.el-table__cell, .el-table__body tr.hover-row.el-table__row--striped>td.el-table__cell, .el-table__body tr.hover-row>td.el-table__cell, .el-table__body tr>td.hover-cell {
      background-color: $rowHoverBackgroundColor;
    }


    .el-table__body tr.current-row>td.el-table__cell,
    .el-table__body tr.selection-row>td.el-table__cell,
    .el-table__row.hover-row{
      color: $rowHoverFontColor;
      td {
        background-color: $rowHoverBackgroundColor;
      }
    }

    &.el-table--enable-row-hover .el-table__body tr:hover>td.el-table__cell {
      background-color: $rowHoverBackgroundColor;
      color: $rowHoverFontColor;
    }

    .el-table__body tr.current-row>td.el-table__cell, .el-table__body tr.selection-row>td.el-table__cell {
      background-color: $rowHoverBackgroundColor;
    }
    
    .el-table__cell {
      position: static;
      left: 0;
      padding: $cellPadding;
      line-height: normal;
    }

    th.is-leaf {
      left: 0;
      position: static;
    }

    tr {
      background-color: $rowBackgroundColor;   
    }

    
    thead.is-group,
    thead {
      background-color: transparent;
      th.el-table__cell {
        color: $headerFontColor;
        font-weight: bold;
        background-color: $headerBackgroundColor;
      }
    }
    .el-table__row--striped td {
      background-color: $rowStripedBackgrounColor;
      color:$rowStripedFontColor;
    }
    .el-table__body-wrapper tr td {
      font-weight: normal;
    }
    
    td.el-table__cell, th.el-table__cell.is-leaf {    
      border-bottom-width: 0;    
    }
    .el-table__cell.gutter {
      display: none;
      width: 0;
    }

    .el-table__footer-wrapper {
      color: $footerFontColor;
      tr {
        td {
          background-color: $footerBackgroundColor;
        }        
      }
    }
    .el-table__fixed-footer-wrapper {
      color: $footerFontColor;
      tbody td.el-table__cell {
        background-color: $footerBackgroundColor;        
      }
    } 

    .sort-caret {
      border-width: 8px;
      &.ascending {
        top: -0.5px;
      }
      &.descending {
        bottom: -0.5px;
      }
    }
    .descending .sort-caret.descending {
      border-top-color: #2ffff2;
    }
    .ascending .sort-caret.ascending{
      border-bottom-color: #2ffff2;
    }
    
  }
}

